<template>
  <Content class="gmvBody">
    <a-row :gutter="24">
      <a-col>
        <div class="gmvTitle">实际GMV</div>
        <number :data="data.toString()" style="margin-left: 15px;"/>
      </a-col>
      <a-col>
        <div class="gmvTitle">订单总量</div>
        <number :data="booker.toString()" style="margin-left: 15px;"/>
      </a-col>
      <a-col>
        <tipTitle style="margin:10px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','width':'71px'}">
          <template #title>
            <span style="color: #FFFFFF;font-size: 14px;padding: 10px">毛利润</span>
          </template>
        </tipTitle>
        <tipTitle style="margin:10px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'199px'}">
          <template #title>
            <span style="color: #E5B700;font-size: 24px;padding: 10px">
              $412,3230.59
            </span>
          </template>
        </tipTitle>
      </a-col>
      <a-col>
        <tipTitle style="margin:10px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','width':'71px'}">
          <template #title>
            <span style="color: #FFFFFF;font-size: 14px;padding: 10px">毛利率</span>
          </template>
        </tipTitle>
        <tipTitle style="margin:10px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'61px'}">
          <template #title>
            <span style="color: #8F64FF;font-size: 24px;padding: 10px">
              50%
            </span>
          </template>
        </tipTitle>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col>
        <tipTitle style="margin:10px 0 0 20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'47.75px','width':'163px'}">
          <template #title>
            <div class="topTitle">
              <span style="color: #1F97CA;font-size: 13px;padding: 10px">广告消耗</span>
              <span style="color: #FF960E;font-size: 16px;padding: 10px;margin-left: 10px">30%</span>
            </div>
          </template>
        </tipTitle>
        <tipTitle style="margin-left:20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'163px'}">
          <template #title>
            <span style="color: #FF960E;font-size: 24px;padding: 10px;text-align: center">12460</span>
          </template>
        </tipTitle>
      </a-col>
      <a-col>
        <tipTitle style="margin:10px 0 0 20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'47.75px','width':'163px'}">
          <template #title>
            <div class="topTitle">
              <span style="color: #FFFFFF;font-size: 13px;padding: 10px">实际退款额（重发或补发）</span>
              <span style="color: #3CE6BC;font-size: 16px;padding: 10px;margin-left: 10px">5%</span>
            </div>
          </template>
        </tipTitle>
        <tipTitle style="margin-left:20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'163px'}">
          <template #title>
            <span style="color: #3CE6BC;font-size: 24px;padding: 10px;text-align: center">223</span>
          </template>
        </tipTitle>
      </a-col>
      <a-col>
        <tipTitle style="margin:10px 0 0 20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'47.75px','width':'163px'}">
          <template #title>
            <div class="topTitle">
              <span style="color: #FFFFFF;font-size: 13px;padding: 10px">采购额</span>
              <span style="color: #00B7E5 ;font-size: 16px;padding: 10px;margin-left: 10px">10%</span>
            </div>
          </template>
        </tipTitle>
        <tipTitle style="margin-left:20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'163px'}">
          <template #title>
            <span style="color: #00B7E5;font-size: 24px;padding: 10px;text-align: center">888</span>
          </template>
        </tipTitle>
      </a-col>
      <a-col>
        <tipTitle style="margin:10px 0 0 20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'47.75px','width':'163px'}">
          <template #title>
            <div class="topTitle">
              <span style="color: #FFFFFF;font-size: 13px;padding: 10px">头程+尾程物流费用</span>
              <span style="color: #00B7E5;font-size: 16px;padding: 10px;margin-left: 10px">7%</span>
            </div>
          </template>
        </tipTitle>
        <tipTitle style="margin-left:20px" :cssClass="{'background': 'linear-gradient(to right, #274B6D, #112441)','height':'60px','width':'163px'}">
          <template #title>
            <span style="color: #00B7E5;font-size: 24px;padding: 10px;text-align: center">888</span>
          </template>
        </tipTitle>
      </a-col>
    </a-row>
  </Content>
</template>
<script setup>
import Content from './component/content.vue';
import number from './component/number.vue'
import tipTitle from '@/components/bigData/component/title.vue'
const data = 4536871
const booker = 7318
</script>
<style scoped lang="less">
.gmvBody {
  height:266px;
  width:850px;
  background:linear-gradient(to right, #274B6D, #112441);
  .gmvTitle{
    color: #3DE8FA;
    font-size: 14px;
    margin:20px;
  }
  .topTitle{
    display: flex;
    align-items: center;
  }
}
</style>
